import AppleItem from './components/AppleItem';
import { inject, observer } from 'mobx-react';
import './style.scss';

function MobxApple({ appleStore }) {
  const getAppleItem = () => {
    let list = [];
    const { apples, eatApple } = appleStore;
    apples.forEach(apple => {
      if(!apple.isEaten) {
        list.push(<AppleItem apple={apple} key={apple.id} eatApple={eatApple} />)
      }
    });

    if(list.length) return list;

    return <div className="empty-tip" key="empty">苹果篮子空空如也</div>;
  }

  const { appleStatus: { eaten, notEaten}, pickApple, isPicking } = appleStore

  return (
    <div className="appleBusket">
      <div className="title">苹果篮子</div>

      <div className="stats">
        <div className="section">
          <div className="head">当前</div>
          <div className="content">{notEaten.quantity}个苹果，{notEaten.weight}克</div>
        </div>
        <div className="section">
          <div className="head">已吃掉</div>
          <div className="content">{eaten.quantity}个苹果，{eaten.weight}克</div>
        </div>
      </div>

      <div className="appleList">
        {getAppleItem()}
      </div>

      <div className="btn-div">
        <button className={isPicking ? 'disabled' : ''} onClick={pickApple} >
          {isPicking ? '正在摘苹果...' : '摘苹果'}
        </button>
      </div>
    </div>
  );
}

export default inject('appleStore')(observer(MobxApple));
